import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';


export default class Root extends React.Component {

    render() {
        const Home = (props) => { console.log(props, 'home'); return <h1>Home Page</h1> };
        const About = (props) => { console.log(props, 'home'); return <h1>about</h1> };
        const Three = (props) => { console.log(props, 'home'); return <h1>three</h1> };
        const Four = (props) => { console.log(props, 'home'); return <h1>four</h1> };
        const Links = () => (
            <nav>
                <Link to="/home">home</Link>
                <Link to="/about">about</Link>
                <Link to="/three">three</Link>
                <Link to="/four">four</Link>
            </nav>
        );
        return (
            <BrowserRouter basenname="/" keyLength={12}>
                <div>
                    <Links />
                    <Switch>
                        <Route exact path="/home" component={Index} />
                        <Route path="/about" component={About} />
                        <Route
                            path="/:fitstitem"
                            render={({ match }) => (
                                <h1>state:{match.params.fitstitem}</h1>
                            )} />
                        <Route render={() => <h1>请点击⬆️</h1>} />
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}




ReactDOM.render(<Root />, document.getElementById('app'));